import React, { useState } from 'react';

const TodoInput = (props) => {
  const { addTodoItem, hanDoneNum, hanUnDoneNum } = props;
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleAddTodoItem = () => {
    if (!inputValue.trim()) {
      return;
    }
    addTodoItem(inputValue);
    setInputValue('');
  };

  return (
    <div className="max-w-3xl mx-auto mb-6 bg-white rounded-lg shadow-md p-6">
      <div className="flex gap-3 mb-4">
        <input
          type="text"
          value={inputValue}
          onChange={handleInputChange}
          className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
        />
        <button
          onClick={handleAddTodoItem}
          className="px-6 py-2 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors duration-200"
        >
          添加
        </button>
      </div>
      <div className="flex gap-6 text-sm">
        <span className="text-green-600 font-medium">已完成 {hanDoneNum} 项</span>
        <span className="text-orange-600 font-medium">未完成 {hanUnDoneNum} 项</span>
      </div>
    </div>
  );
};

export default TodoInput;
